/**
 * Copyright 2022 Redpanda Data, Inc.
 *
 * Use of this software is governed by the Business Source License
 * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
 *
 * As of the Change Date specified in that file, in accordance with
 * the Business Source License, use of this software will be governed
 * by the Apache License, Version 2.0
 */

@use "sass:math";
@use "sass:color";
@use "variables.scss";

@mixin tlrb {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

@mixin beforeAfter {
  @include tlrb;
  position: absolute;
  content: " ";
}

// linear interpolation (color)
// returns a value between $a and $b, depending on $t
// $t=0 returns $a
// $t=1 returns $b
@function lerp($a, $b, $t) {
  @return color.mix($b, $a, $t * 100);
}

.scroll-on-hover-y {
  overflow-y: hidden;
  overflow-x: hidden;
}

.scroll-on-hover-y:hover {
  overflow-y: auto;
  overflow-y: overlay;

  // scrollbar-width: 8px;
  &::-webkit-scrollbar {
    display: block;
    width: 6px;
    // height: 8px;

    // background-color: transparent;
    background-color: hsl(0, 0%, 85%);
  }

  &::-webkit-scrollbar-thumb {
    background: hsl(0, 0%, 55%);
    border-radius: 1px;
  }

  &::-webkit-scrollbar-button {
    display: none;
  }
}

.cell {
  @include tlrb;
  box-sizing: border-box;
  display: block;
  width: 100%;
}

.cell-overflow {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cellDiv {
  display: block;
  /* padding-right: 2em; */
  width: 0;
  min-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: text-bottom;

  position: relative;

  &.fade::after {
    @include beforeAfter;
    left: unset;
    width: 30px;

    background: linear-gradient(to right, transparent, white);
  }
}

/*
    Fixes for react-json-view
*/
.react-json-view {
  padding-left: 1em;
  font-size: 22px;

  .icon-container {
    position: absolute;
    width: auto;
    transform: translateX(-80%) translateY(-1px);

    .expanded-icon {
      display: inline-block;
      transform: translateX(-1px);
    }

    .collapsed-icon {
      display: inline-block;
      transform: translateX(1px);
    }
  }

  span > .icon-container ~ span {
    display: inline !important;
  }

  .node-ellipsis {
    line-height: 0px !important;
  }

  .object-meta-data {
    user-select: none;
  }

  .variable-value,
  .string-value {
    cursor: pointer !important;
  }
}

.dataRefreshButton {
  height: 32px;
  display: inline-flex;
  margin-left: 10px;

  background: variables.$color-reload-spinner-bg;
  color: variables.$color-reload-spinner;

  border-radius: 30px;
  place-content: center;
  place-items: center;
  white-space: nowrap;
}

.showOnHover {
  opacity: 0.2;
}

.showOnHover:hover {
  opacity: 1;
}

.spinnerText {
  user-select: none;
  margin-left: 10px;
}

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 100%;

  border: 2px solid transparent;
  border-bottom-color: hsl(14deg, 100%, 50%);
  border-top-color: hsl(14deg, 100%, 50%);
  animation: rotateIn 1.2s cubic-bezier(0.25, 0.8, 0.9, 0.9) 0s 1, rotate 0.7s linear 1.2s infinite, spinnerFadeIn 0.5s ease 0s 1;

  @keyframes rotateIn {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(1800deg);
    }
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  @keyframes spinnerFadeIn {
    from {
      opacity: 0;
      scale: 120%;
    }

    to {
      opacity: 1;
      scale: 100%;
    }
  }
}

.pulsating {
  animation: pulse 0.5s linear 0s infinite;
}

@keyframes pulse {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  to {
    transform: 1;
  }
}

.fadeIn {
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.menu-divider-group-title {
  color: transparent;
  height: 1px;
  background: #fff2;
  /* margin    : 1em; */
  text-overflow: clip;
  /* font-size : 0; */
  transition: all 0.3s ease-out 0s;
}

.menu-divider {
  color: transparent;
  height: 1px;
  background: #fff2;
  text-overflow: clip;
  transition: all 0.3s ease-out 0s;
  margin: 1em 1em;
}

.cursor-pointer {
  cursor: pointer;
}

.hoverLink:hover {
  cursor: pointer;
  color: var(--ant-primary-color);
}

.pureDisplayRow {
  color: inherit;
}

/* */
/* Table size={'middle} */
/* */

.fadeIn3d {
  opacity: 1;
  transform: translateY(0) perspective(10em) rotateX(0) scale(1, 1);
  transition: all 0.15s ease-out;
}

.fadeOut3d {
  opacity: 0;
  transform: translateY(0.1em) perspective(6em) rotateX(30deg) scale(0.85, 0.85);
  transition: all 0.1s ease-out;
}

.query-form {
  margin-bottom: 1em;
}

.error-list {
  display: flex;
  flex-direction: column;
  gap: 0.7em;

  padding: 2em;
  margin: 1em 0;
  background: hsla(205, 15%, 90%, 1);
  border-radius: 6px;
}

.codeBox {
  display: inline-block;
  margin: 0;
  padding: 0.1em 0.4em;
  padding-bottom: 0.05em;
  white-space: pre-wrap;
  line-break: anywhere;
  font-size: 85%;
  font-family: monospace;

  background: rgb(241, 241, 241);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 3px;
}

.w100 {
  width: 100%;
}

.sider {
  box-shadow: 0px 0px 6px 0px #00000024;
  transition-timing-function: ease-out;
}

.sideBar {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100vh;
  background: white;

  img[alt="logo"] {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 80px;
    margin: auto;
    // padding: 25px;
    padding: 27px 50px 27px 0px;
    transition: all 200ms;
  }

  .titleText {
    position: absolute;
    transition: all 200ms;
    width: 100%;
    font-family: "Kumbh Sans", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 6px;
    transform: translateX(4px);
    font-size: 1.8rem;
    text-align: center;
    color: hsl(14deg 1% 55% / 55%);
  }
}

.sideBarToggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  height: 40px;
  background: hsla(0, 0%, 50%, 0.07);
  cursor: pointer;

  .icon {
    font-size: 20px;
    color: hsl(0deg 0% 60%);
    transition: color 100ms;
  }

  &:hover .icon {
    color: hsl(0deg 0% 30%);
  }
}

.versionTitle {
}

.hoverBorder {
  border-color: transparent;
}

.hoverBorder:hover {
  border-color: unset;
}

.whiteSpaceDefault {
  white-space: normal;
}

.nowrap {
  white-space: nowrap;
}

.consumerGroupCompleteID {
  white-space: normal;
  word-break: break-all;
}

.consumerGroupName {
  white-space: nowrap;
}

.consumerGroupSuffix {
  opacity: 0.4;
  white-space: nowrap;
  font-size: 66%;
}

.groupLagDisplayLine {
  font-size: 85%;
  margin-bottom: 0.2em;
}

.groupLagDisplayLine:not(:last-child) {
  padding-bottom: 0.2em;
  border-bottom: 1px solid #eee;
}

.menu-permission-tooltip {
  user-select: none;
  box-shadow: 0 0 5px 1px #00000047;
  min-width: 203px;

  border-radius: 6px;
}

tr.tombstone {
  /* background: rgba(200, 200, 200, 0.09); */
  color: rgba(0, 0, 0, 0.25);
}

.kowlCard {
  position: relative;
  margin: 0;
  margin-bottom: 0.75rem;
  padding: 1rem 1.5rem;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.05);
}

.noSelect {
  user-select: none;
}

.iconButton {
  // svg[width] {
  //     transform: scale(1);
  // }
  transition-duration: 100ms;
  transition-timing-function: ease-out;
  transition-delay: 0ms;
  color: hsl(0, 0%, 45%);

  &:hover {
    z-index: 1;
  }
}

.disableAnimation {
  animation-duration: 0s !important;
}

// todo: fix table layout (ellipsis, never greater than min-content, only expand one row to let the table fill its parent, expand in predefined ratios, ...)
tr td.ellipsis {
  position: relative;
}

.ellipsis:before {
  content: "&nbsp;";
  visibility: hidden;
}

.ellipsis span {
  position: absolute;
  left: 0;
  right: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

tr > td.msgTableActionColumn {
  text-align: right;
}

.msgTableActionColumn {
  .iconButton {
    color: hsl(0, 0%, 35%);
  }
}

.fill {
  width: 100%;
  height: 100%;
}

.roleTitle {
  margin-bottom: 1em;
  /* padding: 0 8px; */
  cursor: default;
  font-size: 0.7rem;
  font-weight: 600;
  /* todo: use open sans for all "small text" like labels and small headings */
  font-family: "Open Sans";
  color: rgb(139, 139, 139);
  /* border-bottom: solid 1px rgba(0, 0, 0, 0.1); */
}

tr.consumerGroupNoMemberAssigned {
  color: rgba(0, 0, 0, 0.3);
}

.labelText {
  margin-bottom: 3px;
  margin-left: 1px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.45);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  /* background: linear-gradient(90deg, rgba(0, 0, 0, 20%) 5%, rgba(0, 0, 0, 0) 100%) bottom no-repeat;
    background-size: 100% 1px; */
  user-select: none;
}

.messagesSpecialIconButton {
  padding: 0px 15px;
}

.messagesSpecialIconButton:not(:first-child) {
  border-left: 1px solid hsla(205, 100%, 90%, 0.5);
}

svg {
  display: inline-block;
  height: 100%;
}

.quickTable {
  text-align: initial;
}

/* Helper classes */
.displayNone {
  display: none;
}

.marginTop1em {
  margin-top: 1em;
}

.marginTop05em {
  margin-top: 0.5em;
}

.h3 {
  font-weight: 500;
  padding-right: 0.5em;
  color: rgba(0, 0, 0, 0.85);
  font-size: 1.17em;
}

.inlineFlex {
  display: inline-flex;
}

.marginRight05em {
  margin-right: 0.5em;
}

.marginRight1em {
  margin-right: 1em;
}

.code-editor-textarea {
  outline: none;
}

.verticalCenter {
  vertical-align: middle;
}

.verticalCenter:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.svgCenter {
  display: inline-block;
  vertical-align: middle;
  margin-top: -20px;
  margin-bottom: -20px;
  margin-left: -3px;
  margin-right: -3px;
}

.messageSearchFilterBar {
  padding: 0px 10px;
  border-radius: 50px;
}

.resourceLabel {
  font-weight: 600;
  font-size: 100%;
  color: hsl(0, 0%, 30%);
  font-family: "Open Sans";
  cursor: default;
}

.resourceName {
  text-transform: capitalize;
  font-weight: bold;
  font-size: 90%;
  padding-bottom: 2px;
  display: inline-block;
  padding: 0px 3px;
}

.resourceLabelSub {
  color: #606060;
}

.permissionsList {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

/* Permission "Actions" */
.permissionsList span {
  margin-right: 3px;
  margin-top: 2px;
  padding: 1px 8px;
  font-size: 85%;
  text-transform: capitalize;
  border-radius: 20px;
  background: rgba(124, 211, 255, 0.35);
  color: hsl(208, 32%, 55%);
  border-width: 0;
}

.joinerOr {
  font-size: 80%;
  font-weight: bolder;
  padding-bottom: 4px;
  margin: 0 3px;
  padding: 0 1px;
  font-family: sans-serif;
  text-transform: lowercase;
  background: transparent;
}

.permissionRegex span.codeBox {
  padding: 2px 4px;
  font-size: 12px;
  color: hsl(0, 0%, 40%);
  background: rgb(219, 219, 219);
  border-width: 0px;
}

.roleBindingId {
  font-size: 70%;
  font-weight: 600;
  color: #aaa;
  display: flex;
}

.expander {
  background: none;
}

.subjectListExpander {
  font-size: 85%;
  padding: 0;
}

.tableRowHighlightSpecial {
  background-color: rgba(255, 187, 0, 0.185);
}

.userPreferencesButton {
  opacity: 0.8;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
  color: #888;
  background-color: hsla(216, 20%, 92%, 1);
}

.preferencesDialog {
  *[display="flex"] {
    max-height: 100%;
  }
}

.smallText {
  font-family: "Open Sans", sans-serif;
  font-size: 10.5px;
  padding-left: 2px;
  color: hsla(0, 0%, 40%, 1);
  cursor: default;
}

.filterTagDisabled {
  color: rgba(46, 46, 46, 0.66);
  background: rgba(46, 46, 46, 0.1);

  .filterName {
    text-decoration: line-through black;
  }
}

.messageHeaders {
  border-bottom: 1px solid #ddd;
}

.noPadding {
  padding: 0 !important;

  div.error {
    background: #ffc8c8;
    padding: 8px 16px;
  }

  div.brokerConfigView {
    padding: 16px 16px 8px 16px;
  }

  .codeBox {
    background: hsl(0, 45%, 80%);
  }
}

.topicDocumentation {
  padding: 0 16px;

  p {
    margin-left: 2px;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 0.8em;
  }

  pre {
    padding: 12px;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.45;
    color: #333;
    background-color: #f5f8fb;
    border-radius: 3px;
    overflow: auto;
  }

  table {
    margin-bottom: 16px;

    td,
    th {
      padding: 6px 13px;
      border: 1px solid hsl(210deg, 7%, 86%);
    }

    th {
      font-weight: 600;
    }

    th,
    tr:nth-child(2n) {
      background-color: #f5f8fb;
    }
  }
}

.radioOptionGroup {
  $borderRadius: 6px;

  width: 100%;
  display: flex;
  flex-direction: column;

  border: 1px solid hsl(0deg, 0%, 94%);
  border-radius: $borderRadius;

  user-select: none;
}

.waitingForMessagesText {
  animation: waitingForMessagesTextPulse 1.5s ease-in-out 0s infinite;
}

@keyframes waitingForMessagesTextPulse {
  0% {
    color: inherit;
  }

  100% {
    color: inherit;
  }
}

.waitingForMessagesBox::before {
  @include beforeAfter;

  border-radius: 4px;
  box-shadow: 0 0 8px 4px #7e8a93b0;

  animation: waitingForMessagesBoxPulseShadow 1.5s ease-in-out 0s infinite;
}

@keyframes waitingForMessagesBoxPulseShadow {
  0% {
    box-shadow: 0 0 4px 1px hsla(206deg, 10%, 85%, 50%);
  }

  50% {
    box-shadow: 0 0 8px 2px #7e8a93b0;
  }

  100% {
    box-shadow: 0 0 4px 1px hsla(206deg, 10%, 85%, 50%);
  }
}

.reassignPartitions {
  .ant-steps-item-custom {
    user-select: none;

    .ant-steps-item-icon > .ant-steps-icon {
      font-size: 20px;
    }
  }

  .ant-table-expanded-row th {
    cursor: default;
  }

  .ant-table-expanded-row > td {
    &::before {
      content: " ";
      display: block;
      position: absolute;
      box-shadow: 0px 0px 3px 0px #000000;
      top: 1px;
      left: 2px;
      right: 2px;
      bottom: 0px;
      z-index: -1;
      border-radius: 2px;
    }
    & {
      border-radius: 1px;
    }
  }

    // section
    .currentReassignments {
    display: flex;
    place-items: center;
    margin-bottom: 0.5em;
    gap: 0.5em;

    .title {
      font-size: 1.17em;
      font-weight: 500;
      color: hsla(0deg, 0%, 0%, 85%);
      margin-left: 0.2em;
      padding-bottom: 2px;
    }

    button {
      background: hsla(210deg, 100%, 56%, 0.05);

      &:hover {
        background: hsl(210deg, 80%, 95%);
      }
    }
  }

  .errorPartition td {
    background: #ff8d002e !important;
    color: #0005;
  }
}

.brokerTagList {
  display: inline-flex;
  gap: 1px;
  border-radius: 4px;
  background: hsl(0deg, 0%, 85%);

  .broker-tag {
    display: inline-flex;

    position: relative;
    border: none;
    // font-size: 13px;
    font-weight: 500;
    user-select: none;
    // padding: 1px 9px;
    margin: 0;
    padding: 1px 12px;
    border-radius: 0;
    background: hsl(207deg, 10%, 95%);
    color: hsl(0deg, 0%, 45%);

    &.leader {
      &::after {
        @include beforeAfter;

        border-radius: 3px;

        border: 0px solid hsl(0deg, 0%, 60%);
        border-bottom-width: 2px;
      }
    }

    &:hover {
      opacity: 1;
    }

    &.offline {
      background: hsl(0deg, 80%, 76%);
      color: hsl(0deg, 80%, 25%);
    }

    &.added {
      // background: hsl(111deg, 82%, 69%);
      color: hsl(111deg, 100%, 34%);

      &::after {
        @include beforeAfter;

        border-radius: 3px;

        border: 0px solid hsl(105deg, 100%, 40%);
        border-bottom-width: 2px;
      }

      // &::before {
      //     content: '+';
      //     position: absolute;
      //     top: -3px;
      //     left: 1px;

      //     width: 14px;
      //     height: 14px;
      //     background: hsl(9deg, 0%, 66%);
      //     border-radius: 100%;

      //     display: flex;
      //     place-content: center;
      //     place-items: center;

      //     color: white;
      //     font-family: 'Open Sans';
      //     font-size: 15px;
      //     font-weight: bold;

      //     padding-bottom: 2px;
      // }
    }

    &.removed {
      color: hsl(15deg, 75%, 60%);
      // box-shadow: inset #ff7054 0px 0px 2px 1px;

      &::after {
        @include beforeAfter;

        border-radius: 3px;

        border: 0px solid hsl(16deg, 100%, 50%);
        border-bottom-width: 2px;
      }
    }

    &:first-child {
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
    }

    &:last-child {
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
    }

    // The number inside
    span {
      padding: 0 2px;
    }
  }
}

mark {
  padding: 1px;
  background-color: hsl(54deg, 100%, 50%);
}

.partitionReassignmentSpinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 100%;

  vertical-align: text-bottom;
  margin-bottom: 1px;

  border: 2px solid hsl(0, 0%, 85%);
  border-bottom-color: var(--ant-primary-color);
  border-top-color: var(--ant-primary-color);
  animation: rotate 1.5s linear 0s infinite;

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
}

.devOnly {
  padding: 1em;
  background: hsl(53deg, 100%, 80%);
}

// table
.activeReassignments {
  // make rows appear clickable
  tr {
    cursor: pointer;

    &:hover {
      color: var(--ant-primary-color);
      background: hsl(205, 100%, 98%);
    }
  }
}

// Container for text that has the tooltip
.tooltip {
  position: relative;
  display: inline-block; // don't expand to fill the container

  // Text shown in the bubble
  .tooltiptext {
    position: absolute;
    z-index: 1;
    visibility: hidden;
    min-width: 60px;

    padding: 0.5em 0.75em;
    border-radius: 4px;

    background-color: hsla(210, 14%, 20%, 0.9);
    color: hsl(0, 0%, 87%);
    text-align: center;

    font-size: 11px;
    font-family: Verdana, "Segoe UI", Tahoma, Geneva, sans-serif;
    line-height: 1.5;

    // position at top
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);

    // animate
    opacity: 0;
    transition: opacity 150ms 300ms;

    // make tooltip not instantly dissapear when trying to copy from it
    &::after {
      $space: -6px;

      content: " ";
      position: absolute;
      top: $space;
      left: $space;
      bottom: $space;
      right: $space;
      z-index: -1;
      background: transparent;
    }
  }

  &:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }

  code {
    background: hsl(210deg, 8%, 35%);
    border-radius: 2px;
    padding: 2px 4px;
    line-height: 2;
  }
}

.nbspSeparator {
  white-space: nowrap;
  font-size: 66%;
}

.groupDetails {
  .iconButton {
    position: relative;
    display: inline-block;
    color: #9ea6b2;
    width: 20px;
    height: 20px;

    &::after {
      @include beforeAfter;
      border-radius: 2px;
      background-color: transparent;
      margin: -4px;
    }

    // unless disabled...
    &:not(.disabled) {
      // darker color on hover
      &:hover {
        color: #6d727a;

        &::after {
          background-color: #0001;
        }
      }

      // slight background when pressed
      &:active {
        &::after {
          background-color: #0002;
        }
      }
    }
    & {
      cursor: pointer;
    }
  }
}

// disabled iconButtons use 0.6 opacity
.iconButton.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

// iconButton in a table row is invisible unless hovered
tr:not(:hover) .iconButton {
  opacity: 0;
}

$easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
$easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
$easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715);
$easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
$easeInCirc: cubic-bezier(0.6, 0.04, 0.98, 0.335);

$easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
$easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
$easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1);
$easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
$easeOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1);

$easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1);
$easeInOutSine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
$easeInOutExpo: cubic-bezier(1, 0, 0, 1);
$easeInOutCirc: cubic-bezier(0.785, 0.135, 0.15, 0.86);

.crossFade {
  $fadeTimeIn: 400ms;
  $fadeTimeOut: 400ms;
  $fadeTimeHeight: 200ms;

  outline: solid red 2px;

  &-enter {
    position: absolute;
    opacity: 0;
    transform: translateX(-20px) scale(1);
  }

  &-enter-active {
    opacity: 1;

    transition: opacity $fadeTimeIn $easeOutCirc, transform $fadeTimeIn $easeOutCirc;

    transform: translateX(0) scale(1);
  }

  &-leave {
    position: absolute;
    opacity: 1;
    transform: translateX(0em) scale(1);
  }

  &-leave-active {
    opacity: 0;
    transform: translateX(10px) scale(1);

    transition: opacity $fadeTimeOut $easeOutCirc, transform $fadeTimeOut $easeOutCirc;
  }

  &-height {
    transition: height $fadeTimeHeight $easeOutCirc, width $fadeTimeHeight $easeOutCirc;
  }
}

.consumerGroupModal {
  &-edit {
    // edit dialog
  }

  &-delete {
    // delete dialog
  }
}

// when a some container containing a radio button is animated,
// it sometimes causes the inner part (the "dot") of a radio button to become misaligned
// adding a perspective transform fixes it (wtf chrome? just do it correctly like firefox...)
.footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: 10px;
  padding: 0;
  padding-top: 3em;
  padding-bottom: 8px;
  margin-top: auto;

  color: hsl(216deg, 11%, 66%);

  .links {
    display: flex;
    grid-gap: 1em;
    gap: 1em;
    font-size: 27px;

    a {
      display: flex;
      align-items: center;
      width: auto;
      height: 1em;
      aspect-ratio: 1;
    }
  }

  .versionText {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2em;

    white-space: nowrap;

    .versionGitData {
      font-family: monospace;
      text-transform: uppercase;
      font-size: 110%;
    }

    & {
      font-family: "Kumbh Sans", sans-serif;
      font-size: 12px;
      line-height: normal;
    }
  }
}

.profile {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 60px;

  display: flex;
  align-items: center;
  height: 62px;
  flex-shrink: 0;

  padding: 0 18px 0 12px;
  gap: 11px;

  border-top: 1px solid;
  border-bottom: 1px solid;
  border-color: hsl(220, 2%, 29%);
  // background: hsl(0deg 0% 97% / 50%);
  font-family: "Inter", sans-serif;
  cursor: pointer;
  user-select: none;

  transition: all 250ms;

  $avatarSize: 34px;

  .avatar {
    border-radius: 200px;
    overflow: hidden;

    min-width: $avatarSize;
    width: $avatarSize;
    max-width: $avatarSize;
    height: auto;

    image-rendering: crisp-edges;
    image-rendering: -webkit-optimize-contrast;

    transition: all 200ms;

    img {
      max-height: 100%;
      max-width: 100%;
      object-fit: scale-down;
    }
  }

  .text {
    font-weight: 300;
    white-space: nowrap;
    max-width: 100%;

    overflow: hidden;

    transition: max-width 200ms, opacity 300ms;

    .userName {
      max-width: 100%;
      font-size: 12.5px;
      color: white;
      padding-bottom: 1px;

      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: 500;
    }

    .prefText {
      max-width: 100%;
      font-size: 11.5px;
      color: hsl(218, 11%, 70%);
    }
  }

  &:hover {
    background: rgba(0, 0, 0, 0.2);
  }
}

.avatarDropdown {
  animation-duration: 100ms;
}

.userMenu {
  display: flex;
  flex-direction: column;
  min-width: 180px;

  padding-bottom: 3px;
  padding-top: 3px;

  background-color: #fff;
  border-radius: 2px;

  font-family: "Poppins", sans-serif;
  font-weight: 400;

  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.26);

  .divider {
    height: 1px;
    width: 100%;
    margin: 3px 0px;
    background-color: hsl(215deg, 21%, 93%);

    pointer-events: none;
    cursor: default;
  }

  .menuItem {
    padding: 6px 14px;

    font-size: 13px;
    font-weight: 400;
    color: hsl(0, 0%, 25%);

    cursor: pointer;
    transition: background-color 100ms ease;

    &:hover {
      background-color: hsl(215deg, 21%, 90%);
    }
  }

  .header {
    pointer-events: none;
    padding: 8px 14px;
  }
}

// The inline view thing in the Messages table (value column), that contains all the 'preview results'
.previewTags {
  display: inline-flex;
  column-gap: 12px;
  row-gap: 2px;

  .previewTag {
    display: inline-flex;
    place-items: center;
    gap: 4px;

    .path {
      font-family: monospace;
      font-size: x-small;
      padding: 3px 6px;
      margin-top: 2px;

      border-radius: 10px;
      background: hsl(0deg, 0%, 90%);
      color: hsl(0deg, 0%, 30%);
    }
  }

  &-single {
    // one row for all results, overflow is just hidden
  }

  &-wrap {
    // simple wrapping
    flex-wrap: wrap;
  }

  &-rows {
    // new row for each result
    flex-direction: column;
  }
}

.previewTagsList {
  padding: 0.5em;
  border-radius: 4px;
  background: rgba(200, 205, 210, 0.16);

  .moveHandle {
    display: inline-flex;
    align-self: stretch;
    place-items: center;
    width: 28px;
    margin-left: 2px;
    padding-top: 1px;

    color: hsl(0deg, 0%, 58%);
  }

  .description {
    padding-left: 8px;
    font-size: 12px;
    color: hsl(0deg, 0%, 40%);
  }

  .inlineButton {
    display: inline-flex;
    align-self: stretch;
    place-items: center;
    width: 26px;

    color: hsl(0deg, 0%, 58%);
    cursor: pointer;
  }
}

.previewTagsSettings {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 8px;
}

.globHelpGrid {
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: auto auto auto;
  gap: 2px 18px;

  align-items: center;
  margin-top: 1em;
  margin-bottom: 0.2em;

  // Title Bold
  .h {
    font-weight: 500;
  }

  // Pattern
  .c1 {
  }

  // Example results fade out
  .c2 {
    position: relative;
    max-width: 220px;

    font-family: monospace;
    font-size: small;

    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;

    $maskImg: linear-gradient(to left, transparent, white 40px, white);
    mask-image: $maskImg;
    -webkit-mask-image: $maskImg;

    mask-repeat: no-repeat;
    mask-position: right;
  }

  .c3 {
    max-width: 300px;

    font-size: 12px;
  }

  // First and last columns get padding
  .h:first-of-type,
  .c1 {
    padding-left: 8px;
  }

  .rowSeparator {
    height: 1px;
    background: hsl(0deg, 0%, 92%);
    grid-column-end: span 3;
  }

  .titleRowSeparator {
    @extend .rowSeparator;
    margin-top: 2px;
  }
}

.linkBtn {
  cursor: pointer;
  color: var(--ant-primary-color);

  &:hover {
    text-decoration: solid underline;
  }

  &.disabled {
    opacity: 0.5;
    color: black;
    pointer-events: none;
  }
}

.inlineSeparator {
  display: inline-block;

  height: 16px;
  width: 1px;
  margin-top: 2px;
  margin-bottom: 2px;

  background: hsl(0deg, 0%, 80%);
}

.connectorsTable,
.tasksTable {
  tr:hover {
    .hoverLink {
      // text-decoration: solid underline;
      text-decoration-color: #444;

      &:hover {
        text-decoration-color: unset;
      }
    }
  }
}

.connectorLogo {
  width: 100%;
  height: 100%;
  object-fit: contain;

  transform: translateZ(0); // fixes images becoming blurry when downscaled (for whatever reason)
}

.filterCheckbox {
  &::after {
    @include beforeAfter();
    width: 100%;
    height: 100%;
  }
}

.capitalize {
  text-transform: capitalize;
}

.dynamicInputs {
  display: grid;
  row-gap: 1.5em;
  column-gap: 1.2em;

  grid-template-columns: 1fr 1fr 1fr;
  // grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

  // max-width: 950px;
  align-items: end;

  .none {
    opacity: 0.5;
  }

  .short {
    grid-column: 1 / span 1;
  }

  .medium {
    grid-column: 1 / span 2;
  }

  .long {
    grid-column: 1 / span 3;
  }
}

.inputWrapper {
  position: relative;
  display: inline-block;
  width: 100%;

  &::after {
    @include beforeAfter();
    pointer-events: none;

    border: 1px solid hsl(0deg, 100%, 65%);
    box-shadow: 0px 0px 3px 1px #ffaeae;
    border-radius: 2px;

    opacity: 0;
    $scaleY: 1.5;
    $scaleFactor: 20;
    $scaleX: math.div($scaleY - 1, $scaleFactor) + 1;

    transform: scale($scaleX, $scaleY);

    transition: opacity 150ms ease-out, transform 250ms ease-out;
  }

  .validationFeedback {
    position: absolute;
    z-index: 1;
    min-width: 10px;

    // position at top
    top: 100%;
    left: 0px;
    transform: translateY(-30%);
    padding: 3px 4px 2px 4px;

    // style
    background: hsla(0deg, 100%, 87%, 0.8);
    color: hsl(0deg, 100%, 50%);

    border-radius: 0px 0px 2px 2px;

    font-size: 11px;
    font-family: Verdana, "Segoe UI", Tahoma, Geneva, sans-serif;
    line-height: 1.5;
    word-break: break-all;

    // animate
    opacity: 0;
    transition: opacity 150ms ease-out, transform 250ms ease-out;

    user-select: none;

    // Single line, unless clicked
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;

    &:active {
      white-space: normal;
      overflow: visible;
    }

    .errorCount {
      display: inline-block;
      padding: 0px 4px;
      padding-bottom: 1px;
      margin-inline-end: 4px;

      transform: translateY(-1px);

      background: hsl(5deg, 100%, 50%);
      color: white;
      border-radius: 16px;
      font-size: 10px;
    }
  }

  &.hasError {
    &::after {
      transform: scale(1);
      opacity: 1;
    }

    .validationFeedback {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

.dynamicInputs > div {
  .importanceTag {
    // Can't find a style that looks good and doesn't overload the UI at the moment.
    display: none;

    margin-left: auto;

    margin-top: 2px;
    padding: 1px 6px;
    border-radius: 4px;

    font-size: 0.7em;
    font-weight: 500;

    user-select: none;
    text-transform: capitalize;

    // default hidden
    // opacity: 0.66;
    opacity: 1;
    transition: opacity 300ms ease-out;

    &.high {
      // background: #f20;
      // color: #fff;
      // background: #fff;
      color: rgba(0, 123, 255, 0.726);
      background: rgba(0, 123, 255, 0.1);
    }

    &.medium {
      // background: #f20;
      // color: #fff;
    }

    &.low {
      background: rgba(119, 119, 119, 0.035);
      color: #777;

      // font-style: italic;
    }
  }

  &:hover,
  &:focus-within {
    .importanceTag {
      opacity: 1;
    }
  }
}

.stringList {
  display: flex;
  flex-direction: column;
  // gap: .5em;

  .createEntryRow {
    display: flex;
    gap: 0.5em;
    align-items: center;
    height: 29px;

    margin: 6px 0px;

    & > input,
    & > button {
      height: 100%;
    }
  }

  .reorderableList {
    .draggableItem {
      display: flex;
      align-items: center;
      gap: 4px;

      background: hsl(0deg, 0%, 97%);

      height: 32px;
      // padding: 0px 4px;
      border-radius: 3px;
      overflow: hidden;

      margin-bottom: 4px;

      .dragHandle {
        display: inline-flex;
        align-self: stretch;

        place-items: center;
        width: 28px;
        margin-left: 2px;
        padding-top: 1px;
        color: hsl(0deg, 0%, 70%);

        transform: scale(0.8);
      }

      input {
        height: 28px;
        // margin-right: 4px;
      }

      // Normal
      .ghostInput:not(:focus-within) {
        border-color: transparent;
        background-color: transparent;

        transition: border-color 350ms ease-out, background-color 100ms ease-out;
      }

      // Hover
      .ghostInput:hover:not(:focus-within) {
        cursor: pointer;
        border-radius: 2px;
      }

      // Active
      .ghostInput {
        transition: border-color 80ms ease-out, background-color 80ms ease-out;
      }

      .deleteButton {
        display: inline-flex;
        align-self: stretch;
        place-items: center;
        width: 32px;
        // margin-right: 4px;
        padding-right: 2px;

        color: hsl(0deg, 0%, 70%);
        cursor: pointer;

        opacity: 0; // only visible on hover
        transition: opacity 300ms;

        & > svg {
          transform: scale(1.1);
        }

        &:hover {
          color: hsl(0, 0%, 45%);
          background: hsl(0, 0%, 95%);
        }
      }

      &:hover > .deleteButton {
        opacity: 1;
        transition: opacity 120ms;
      }
    }
  }
}

.monaco-editor.vs {
  .decorationsOverviewRuler {
    opacity: 1;
    background: #eee;

    position: relative;

    border-left: 1px solid #0001;
    box-sizing: content-box;
  }

  .margin-view-overlays {
    border-right: solid 1px #0001;
  }

  // .cursors-layer>.cursor { }
  .view-overlays {
    .bracket-match {
      // box-shadow: #384e608c 0 0 2px 0px;
    }
  }
}

.noArrow {
  display: none;
}

.kowlEditor {
  flex-grow: 1;

  border: 1px solid hsl(0deg, 0%, 90%);
  border-radius: 2px;
}

.editorLoading {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.4em;
  color: transparent;
  background: #00000008;
  animation: 0.5s ease-out 0.1s fadein;
}

@keyframes fadein {
  from {
    color: white;
  }

  to {
    color: hsl(0deg 0% 80%);
  }
}

.configPropDescription {
  font-style: italic;
  font-size: 12px;
  padding-left: 1em;
  padding-right: 2em;
  border-left: 3px solid hsl(0deg 0% 85%);
  color: hsl(208deg 3% 50%);
  background: #f7f7f7;

  &.unknownConfigProp {
    opacity: 0.7;
    background: hsl(0deg 100% 97%);
    color: hsl(0deg 50% 59%);
    border-color: hsl(0deg 100% 85%);
  }
}

.inputGroup {
  display: inline-flex;
  flex-grow: 1;

  > input.chakra-input,
  > button.chakra-button {
    margin-right: -1px;
    flex-grow: 1;
    width: auto;

    &:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:hover,
    &:focus-within {
      z-index: 1;
    }
  }
}

.labelText {
  width: 100%;
  // display: inline-block;
  // padding-bottom: 3px;
  // padding-left: 1px;
  position: relative;

  &.required label::before {
    @include beforeAfter();
    content: "*";
    width: 5px;
    font-size: 16px;
    color: red;
    top: -2px;
    left: -9px;
  }
}

.createTopicModal {
  .labelText {
    // color: rgb(0 0 0 / 60%);
    font-size: 10px;
  }
}

.numericInput {
  $numericInputBtnSize: 26px;
  padding-right: 0;

  .ant-input-suffix,
  .ant-input-prefix {
    // min-width: 18px;

    .btnWrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 1px;
      gap: 1px;

      user-select: none;
    }

    .stepBtn {
      width: $numericInputBtnSize;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      color: rgb(0 0 0 / 40%);

      cursor: pointer;

      > svg {
        transform: scale(0.8) translate(1px, 0);
      }

      & {
        transition: all ease-out 150ms;
      }

      &:hover {
        color: variables.$color-brand-secondary;

        &::after {
          background: hsl(207deg 7% 76% / 14%);
        }
      }

      // larger hit-test
      &::after {
        content: " ";
        position: absolute;
        inset: -6px 0;
        border-radius: 2px;
        // background: #ff000030;
        // background: #40a9ff30;
      }
    }
  }

  .ant-input-affix-wrapper-disabled,
  &.ant-input-affix-wrapper-disabled,
  &:not(:hover) {
    .stepBtn {
      opacity: 0;
      pointer-events: none;
      cursor: default;
    }
  }
}

.iconSelectOption {
  display: flex;
  align-items: center;
  gap: 6px;

  svg {
    height: 1em;
    margin: 0;
  }
}

.flipX {
  transform: rotateX(180deg);
}

body {
  font-family: "Inter" !important;
}

// Console adjustments to be removed later - Dan added the below
nav.chakra-stack {
  a:hover {
    color: white;
  }
}

nav.chakra-breadcrumb {
  a:hover {
    color: rgba(0, 0, 0, 0.85);
  }

  svg {
    display: block;
  }
}

.inputWrapper.hasError {
  border-radius: 8px;

  &:after {
    border-radius: 8px;
  }
}

p,
dl,
dd,
ol,
ul,
h1,
h2,
h3,
h4,
h5 {
  margin-bottom: 0;
}

.BreadcrumbHeading,
.BreadcrumbText {
  line-height: 18.375px;
  font-feature-settings: kern;
}

$borderRadius: 8px;

.inputGroup {
  > * {
    border-radius: 0 !important;
  }

  &:first-child,
  input:first-child {
    border-top-left-radius: $borderRadius !important;
    border-bottom-left-radius: $borderRadius !important;
  }

  &:last-child,
  button:last-child {
    border-top-right-radius: $borderRadius !important;
    border-bottom-right-radius: $borderRadius !important;
  }
}

.controlChar {
  display: inline-block;
  margin: 0;
  margin-right: 1px;
  padding: 0px 2px;
  padding-bottom: 0.05em;
  white-space: nowrap;
  font-size: 9px;
  font-family: monospace;
  background: hsl(357deg 71% 59%);
  color: hsl(0, 0%, 90%);
  border-radius: 3px;
  font-weight: 700;

  user-select: none;
}

